$floating-background-color: rgba(47, 53, 60, 80%);
.navigation-controls {
	//.floating-vertical;
	position: relative;
	clear: both;
	float: right;
	/* border: 1px solid rgba(255, 255, 255, 0.1); */
	font-weight: 300;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 999;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
	background: rgba(16, 34, 67, 0.8);
	border: 1.7px solid rgba(20, 62, 141, 0.7);
	border-radius: 1vw;
	margin-right: 0.7vw;
	top: 0px;
	right: 0px;
}
.navigation-control {
	cursor: pointer;
	pointer-events: auto;
	width: 1.5vw;
	height: 3.8vh;
	line-height: 3.8vh;
}

@mixin navigation-control {
	cursor: pointer;
	width: 1.5vw;
	height: 3.8vh;
	line-height: 27px;
	// margin-left: 1px;
}

.naviagation-control:active {
	color: #fff;
}

.navigation-control-last {
	@include navigation-control;
	pointer-events: auto;
	height: 3.8vh;
	line-height: 3.8vh;
	border-right: 0;
}

.navigation-control-icon-zoom-in {
	position: relative;
	text-align: center;
	font-size: 1.4vw;
	color: $floating-text-color;
}

.navigation-control-icon-zoom-out {
	position: relative;
	text-align: center;
	font-size: 1.8vw;
	color: $floating-text-color;
}

.navigation-control-icon-reset {
	position: relative;
	width: 0.7vw;
	height: 0.7vw;
	fill: rgba($floating-text-color, 80%);
	box-sizing: content-box;
	margin: 0 auto;
	top: 30%;
}

$compass-diameter: 3.8vw;
$compass-ring-width: $compass-diameter * 20 / 145;
$compass-gyro-diameter: $compass-diameter * 50 / 145;

.compass {
	cursor: pointer;
	pointer-events: auto;
	position: relative;
	float: right;
	width: $compass-diameter;
	height: $compass-diameter;
	overflow: hidden;
	z-index: 999;
	margin-right: -0.28vw;
	top: 0px;
	right: 0px;
}

.compass-outer-ring {
	position: absolute;
	top: 0;
	width: $compass-diameter;
	height: $compass-diameter;
	background: url(./outerRing.png);
	background-size: cover;
	//fill: rgba(255,255,255,0.5);
}

.compass-outer-ring-background {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 44px;
	height: 44px;
	border-radius: 44px;
	border: 12px solid $floating-background-color;
	box-sizing: content-box;
}

.compass-gyro {
	pointer-events: none;
	position: absolute;
	top: 0;
	width: $compass-diameter;
	height: $compass-diameter;
	fill: #ccc;
}

.compass-gyro-active {
	fill: $highlight-color;
}

.compass-gyro-background {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 33px;
	height: 33px;
	border-radius: 33px;
	background-color: $floating-background-color;
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-sizing: content-box;
}

.compass-gyro-background:hover + .compass-gyro {
	fill: $highlight-color;
}

.compass-rotation-marker {
	position: absolute;
	top: 0;
	width: $compass-diameter;
	height: $compass-diameter;
	fill: white;
	background: url(./clickIcon.png);
	background-size: cover;
	z-index: 999;
}

// Don't display the nav controls on small screens like mobile phones.
@media screen and (max-width: 700px), screen and (max-height: 420px) {
	.navigation-controls {
		display: none;
	}
	.compass {
		display: none;
	}
}

@media print {
	.navigation-controls {
		display: none;
	}
	.compass {
		display: none;
	}
}
